<template>
  <div>
    <mt-header fixed title="新闻列表">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="content">
      <div class="new-item" v-for="(item,index) in newList" :key="index"
           @click="clickNew(item)">
        <router-link :to='{name:"detail",query:{id:item.id}}'>
          <img :src="item.url" class="image">
          <div class="rightContent">
            <p>{{item.name}}</p>
            <h5>{{item.date | convertTime('YYYY-MM-DD')}}</h5>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "news",
    data() {
      return {
        newList: []
      }
    },
    created() {
      for (var i = 0; i < 10; i++) {
        this.newList.push({
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554357374812&di=93086e3b67105a8f984582739182c449&imgtype=0&src=http%3A%2F%2Fs4.sinaimg.cn%2Fmw690%2F4ce264ddtcc4dd3461723%26690',
          name: '美女图片', id: i, date: '2019-03-08T08:20:30'
        })
      }
    },
    methods: {
      clickNew(item) {
        console.log(item)
        //this.$router.push()
      }
    }
  }
</script>

<style scoped>
  .content {
    padding-top: 41px;
  }

  .new-item {
    padding: 10px;
  }

  .image {
    width: 80px;
    height: 120px;
  }

  .new-item .rightContent {
    display: inline-block;
    height: 100%;
    vertical-align: top;
  }
</style>
